import React, { useState } from "react";
import style from "./style.module.scss";
import dropIcon from "../../../assets/images/icon/hdpi/circle_icon_drop_down_n.png";
import hideIcon from "../../../assets/images/icon/hdpi/login_icon_hide_password_n.png";
import showIcon from "../../../assets/images/icon/hdpi/login_icon_show_password.png";
import { useRequest } from "ahooks";
import { getDepartment, getJobTitleList } from "../../../api/my";
import { Popup, Input } from "react-vant";
import { useNavigate } from "react-router-dom";
import "./custom.css";
import { MyNavBar } from "../../../components";
import { CheckIn, CheckInState, getEmailCode } from "../../../api/user";

//  定义 注册参数数据类型
interface registerRawState extends CheckInState {}
//  定义 职称列表数据类型
interface jobTitleRawState {
  id: string;
  jobTitle: string;
}
//  定义 科室列表数据类型
interface departmentRawState {
  id: string;
  departmentName: string;
  pic: string;
  rank: number;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  //  定义 个人简介 聚焦状态
  const [personalProfileFoucs, setPersonalProfileFoucs] =
    useState<boolean>(false);
  //  定义 擅长领域 聚焦状态
  const [excelFieldFoucs, setExcelFieldFoucs] = useState<boolean>(false);
  //  定义 密码框1 类型状态
  const [type1, setType1] = useState<string>("password");
  //  定义 密码框1 Icon状态
  const [pwdIcon1, setPwdIcon1] = useState<string>(hideIcon);
  const [show1, setShow1] = useState<boolean>(false);
  //  定义 密码框2 类型状态
  const [type2, setType2] = useState<string>("password");
  //  定义 密码框2 Icon状态
  const [pwdIcon2, setPwdIcon2] = useState<string>(hideIcon);
  const [show2, setShow2] = useState<boolean>(false);
  //  定义 科室 状态
  const [department, setDepartment] = useState<string>("");
  //  定义 职称 状态
  const [jobTitle, setJobTitle] = useState<string>("");
  //  定义 弹出层显示与隐藏 状态
  const [showCloseIcon, setShowCloseIcon] = useState<boolean>(false);
  //  定义 弹出层展示数据类型 状态
  const [type, setType] = useState<string>("");
  //  定义 注册所到步骤 状态
  const [step, setStep] = useState<number>(0);
  //  定义 注册所需参数集 状态
  const [values, setValues] = useState<registerRawState>({
    email: "",
    code: "",
    pwd1: "",
    pwd2: "",
    name: "",
    inauguralHospital: "",
    departmentId: "",
    jobTitleId: "",
    personalProfile: "",
    goodField: "",
  });
  //  定义 获取科室列表 接口
  const { data: departmentList = [] } = useRequest(async () => {
    let resp = await getDepartment();
    return resp.result;
  });
  //  定义 获取医生职称列表 接口
  const { data: jobTitleList = [] } = useRequest(async () => {
    let resp = await getJobTitleList();
    return resp.result;
  });
  //  定义 弹出层显示 方法
  const onOpen = (type: string) => {
    setShowCloseIcon(true);
    setType(type);
  };
  //  定义 弹出层隐藏 方法
  const onClose = (id: string, option: string) => {
    if (type === "department") {
      setValues((values) => ({
        ...values,
        departmentId: id,
      }));
      setDepartment(option);
    } else {
      setValues((values) => ({
        ...values,
        jobTitleId: id,
      }));
      setJobTitle(option);
    }

    setShowCloseIcon(false);
  };
  //  定义 密码框1类型切换  方法
  const changeType1 = () => {
    if (!show1) {
      setType1("text");
      setPwdIcon1(showIcon);
      setShow1(true);
    } else {
      setType1("password");
      setPwdIcon1(hideIcon);
      setShow1(false);
    }
  };
  //  定义 密码框2类型切换  方法
  const changeType2 = () => {
    if (!show2) {
      setType2("text");
      setPwdIcon2(showIcon);
      setShow2(true);
    } else {
      setType2("password");
      setPwdIcon2(hideIcon);
      setShow2(false);
    }
  };
  //  定义  个人简介聚焦事件处理函数
  const handlePersonalProfileFocus = () => {
    setPersonalProfileFoucs(true);
    setExcelFieldFoucs(false);
  };
  //  定义  擅长领域聚焦事件处理函数
  const handleExcelFieldFocus = () => {
    setPersonalProfileFoucs(false);
    setExcelFieldFoucs(true);
  };

  const handleBack = () => {
    setStep(0);
    navigate("/login");
    console.log("values", values);
  };

  const handleApply = () => {
    CheckIn(values);
    setStep(3);
  };

  return (
    <div
      className={style.register}
      style={{ margin: step <= 1 ? "75px 30px 0 30px" : "0" }}
    >
      {step <= 1 && (
        <div className={style.header}>
          <div className={style.title}>完善信息</div>
          <div className={style.describe}>审核通过即可重新入驻</div>
          {step === 0 && (
            <div className={style.tip}>*填写正确信息有助于快速通过审核</div>
          )}
        </div>
      )}
      {step === 0 && (
        <form>
          <div className={style.name_wrapper}>
            <label htmlFor="name" className={style.name_label}>
              您的真实姓名
            </label>
            <input
              type="text"
              className={style.name}
              id="name"
              value={values.name}
              onChange={(e) =>
                setValues((values) => ({ ...values, name: e.target.value }))
              }
            />
          </div>
          <div className={style.hospital_wrapper}>
            <label htmlFor="hospital" className={style.hospital_label}>
              您的所在医院
            </label>
            <input
              type="text"
              className={style.hospital}
              id="hospital"
              value={values.inauguralHospital}
              onChange={(e) =>
                setValues((values) => ({
                  ...values,
                  inauguralHospital: e.target.value,
                }))
              }
            />
          </div>
          <div className={style.department_wrapper}>
            <label htmlFor="department" className={style.department_label}>
              您的所在科室
            </label>
            <input
              type="text"
              className={style.department}
              id="department"
              value={department}
              disabled
              onChange={() => console.log("改变")}
            />
            <img
              src={dropIcon}
              alt=""
              className={style.dropIcon}
              onClick={() => onOpen("department")}
            />
          </div>
          <div className={style.jobTitle_wrapper}>
            <label htmlFor="jobTitle" className={style.jobTitle_label}>
              您的职称
            </label>
            <input
              type="text"
              className={style.jobTitle}
              id="jobTitle"
              value={jobTitle}
              disabled
              onChange={() => console.log("改变")}
            />
            <img
              src={dropIcon}
              alt=""
              className={style.dropIcon}
              onClick={() => onOpen("jobTitle")}
            />
          </div>
          <button
            type="button"
            className={style.btn_nextStep}
            onClick={() => setStep(1)}
          >
            下一步
          </button>
        </form>
      )}
      <Popup
        visible={showCloseIcon}
        style={{ height: "30%" }}
        position="bottom"
        onClose={() => setShowCloseIcon(false)}
      >
        {type === "department" &&
          departmentList &&
          departmentList.map((item: departmentRawState) => {
            return (
              <div
                className={style.departmentItem}
                key={item.id}
                onClick={() => onClose(item.id, item.departmentName)}
              >
                {item.departmentName}
              </div>
            );
          })}
        {type === "jobTitle" &&
          jobTitleList &&
          jobTitleList.map((item: jobTitleRawState) => {
            return (
              <div
                className={style.departmentItem}
                key={item.id}
                onClick={() => onClose(item.id, item.jobTitle)}
              >
                {item.jobTitle}
              </div>
            );
          })}
      </Popup>
      {step === 1 && (
        <div>
          <div className={style.email_wrapper}>
            <label htmlFor="email" className={style.email_label}>
              您的邮箱账号
            </label>
            <input
              type="text"
              className={style.email}
              id="email"
              value={values.email}
              onChange={(e) =>
                setValues((values) => ({ ...values, email: e.target.value }))
              }
            />
            <div
              className={style.btn_code}
              onClick={() => {
                getEmailCode(values.email);
              }}
            >
              获取验证码
            </div>
          </div>
          <div className={style.code_wrapper}>
            <label htmlFor="code" className={style.code_label}>
              请输入验证码
            </label>
            <input
              type="text"
              className={style.code}
              id="code"
              value={values.code}
              onChange={(e) =>
                setValues((values) => ({
                  ...values,
                  code: e.target.value,
                }))
              }
            />
          </div>
          <div className={style.pwd1_wrapper}>
            <label htmlFor="pwd1" className={style.pwd1_label}>
              请输入密码
            </label>
            <input
              type={type1}
              className={style.pwd1}
              id="pwd1"
              value={values.pwd1}
              onChange={(e) =>
                setValues((values) => ({ ...values, pwd1: e.target.value }))
              }
            />
            <img
              src={pwdIcon1}
              alt=""
              className={style.hideIcon}
              onClick={() => changeType1()}
            />
          </div>
          <div className={style.pwd2_wrapper}>
            <label htmlFor="pwd2" className={style.pwd2_label}>
              请再次输入密码
            </label>
            <input
              type={type2}
              className={style.pwd2}
              id="pwd2"
              value={values.pwd2}
              onChange={(e) =>
                setValues((values) => ({ ...values, pwd2: e.target.value }))
              }
            />
            <img
              src={pwdIcon2}
              alt=""
              className={style.hideIcon}
              onClick={() => changeType2()}
            />
          </div>
          <button
            type="button"
            className={style.btn_nextStep}
            onClick={() => setStep(2)}
          >
            下一步
          </button>
        </div>
      )}
      {step === 2 && (
        <div className={style.improveInformation}>
          <div className="navbar">
            <MyNavBar
              leftArrow
              title=""
              onClickLeft={() => setStep(1)}
            ></MyNavBar>
          </div>
          <div className={style.content}>
            <div className={style.personalProfile}>
              <div className={style.title}>您的个人简介</div>
              <div
                className={
                  personalProfileFoucs ? style.describe_active : style.describe
                }
              >
                <Input.TextArea
                  className={style.detail}
                  rows={6}
                  placeholder="请填写您的个人简介"
                  maxLength={500}
                  showWordLimit
                  value={values.personalProfile}
                  onChange={(val) =>
                    setValues(() => ({ ...values, personalProfile: val }))
                  }
                  onFocus={() => handlePersonalProfileFocus()}
                  onBlur={() => setPersonalProfileFoucs(false)}
                />
              </div>
            </div>
            <div className={style.excelField}>
              <div className={style.title}>您的擅长领域</div>
              <div
                className={
                  excelFieldFoucs ? style.describe_active : style.describe
                }
              >
                <Input.TextArea
                  className={style.detail}
                  rows={6}
                  placeholder="请填写您的擅长领域"
                  maxLength={300}
                  showWordLimit
                  onChange={(val) =>
                    setValues(() => ({ ...values, goodField: val }))
                  }
                  onFocus={() => handleExcelFieldFocus()}
                  onBlur={() => setExcelFieldFoucs(false)}
                />
              </div>
            </div>
            <button className={style.btn_apply} onClick={() => handleApply()}>
              申请入驻
            </button>
          </div>
        </div>
      )}
      {step === 3 && (
        <div className={style.application}>
          <button
            className={style.btn_back}
            onClick={() => handleBack()}
          ></button>
        </div>
      )}
    </div>
  );
};

export default Index;
